import React, {useState} from 'react';
import axios from 'axios';

interface RegisterProps {
    setIsLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
    setRole: React.Dispatch<React.SetStateAction<string>>;
}

interface UserRegistration {
    loginName: string;
    password: string;
    name: string;
    gender: string;
    birthDate: string;
    phone: string;
    email: string;
    description: string;
}

const Register: React.FC<RegisterProps> = () => {
    const [loginName, setLoginName] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');
    const [gender, setGender] = useState('male');
    const [birthDate, setBirthDate] = useState('');
    const [phone, setPhone] = useState('');
    const [email, setEmail] = useState('');
    const [description, setDescription] = useState('');
    const [isUser, setIsUser] = useState(true);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const user: UserRegistration = {
                loginName,
                password,
                name,
                gender,
                birthDate,
                phone,
                email,
                description
            };
            await axios.post(
                `/api/${isUser ? 'users' : 'admins'}/register`,
                user
            );
            alert('Registration successful! Please login.');
        } catch (error) {
            console.error('Registration failed:', error);
            alert('Registration failed');
        }
    };

    return (
        <div>
            <h2>{isUser ? 'User Registration' : 'Admin Registration'}</h2>
            <form onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="loginName">Login Name:</label>
                    <input
                        type="text"
                        id="loginName"
                        value={loginName}
                        onChange={(e) => setLoginName(e.target.value)}
                        required
                    />
                </div>
                <div>
                    <label htmlFor="password">Password:</label>
                    <input
                        type="password"
                        id="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
                </div>
                {!isUser && (
                    <>
                        <div>
                            <label htmlFor="name">Name:</label>
                            <input
                                type="text"
                                id="name"
                                value={name}
                                onChange={(e) => setName(e.target.value)}
                                required
                            />
                        </div>
                        <div>
                            <label htmlFor="gender">Gender:</label>
                            <select
                                id="gender"
                                value={gender}
                                onChange={(e) => setGender(e.target.value)}
                                required
                            >
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                        <div>
                            <label htmlFor="birthDate">Birth Date:</label>
                            <input
                                type="date"
                                id="birthDate"
                                value={birthDate}
                                onChange={(e) => setBirthDate(e.target.value)}
                                required
                            />
                        </div>
                        <div>
                            <label htmlFor="phone">Phone:</label>
                            <input
                                type="tel"
                                id="phone"
                                value={phone}
                                onChange={(e) => setPhone(e.target.value)}
                                required
                            />
                        </div>
                        <div>
                            <label htmlFor="email">Email:</label>
                            <input
                                type="email"
                                id="email"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                required
                            />
                        </div>
                        <div>
                            <label htmlFor="description">Description:</label>
                            <textarea
                                id="description"
                                value={description}
                                onChange={(e) => setDescription(e.target.value)}
                            />
                        </div>
                    </>
                )}
                <button type="submit">Register</button>
            </form>
            <button onClick={() => setIsUser(!isUser)}>
                Switch to {isUser ? 'Admin' : 'User'} Registration
            </button>
        </div>
    );
};

export default Register;